<template>
  <div id="container">
    <Header></Header>

    <div class="outer row" style="margin: 0 auto">
      <!--新布局-->

      <!-- 左侧主体内容 -->
      <section class="col-lg-9">

        <div class="row" style="margin-top: 15px;">
          <a href="http://www.javacto.cn/tuling/index1.html?=CXYDD" target="_blank">
            <img src="../../assets/adv/springcloud1-3.png" style="width: 100%;padding: 15px;"/>
          </a>
        </div>

        <article id="post-spring-cloud-alibaba-release-0-9-0" class="article article-type-post lock" itemscope
                 itemprop="blogPost">

          <!--<div id="locker" style="display: block;">-->
          <!--<div class="mask"></div>-->
          <!--<div class="info">-->
          <!--<button type="button" class="btn btn-danger btn-lg"  onclick="readAll();">阅读全文</button>-->
          <!--</div>-->

          <!--</div>-->


          <div id="post-body" class="article-inner">


            <header class="article-header">

              <h1 class="article-title" itemprop="name">
                {{article.title}}
              </h1>

              <div class="article-meta">

                <span class="label label-success"
                      style="float: left;padding: 3px 5px 3px 5px;margin-right: 15px;">原创</span>


                <div class="article-date">
                  <i class="fa fa-calendar"></i>
                  <a href="/spring-cloud-alibaba-release-0-9-0/">
                    时间:
                    <time datetime="2019-04-21T02:28:00.000Z" itemprop="datePublished">{{article.createDate}}</time>
                  </a>
                </div>


                <div class="article-category" style="text-transform: none;">
                  <i class="fa fa-user"></i>
                  author:笑笑生
                </div>


                <div class="article-category" style="text-transform: none;">
                  <i class="fa fa-folder"></i>

                  分类: <a class="article-category-link" :href="'/#/categories/' + article.category.id+ ''">{{article.category.categoryname}}</a>
                </div>
                <span id="busuanzi_container_page_pv">被围观 <span
                  id="busuanzi_value_page_pv">{{article.viewCounts}}</span> 次</span>
              </div>

            </header>


            <!-- 文章标题下方 -->
            <div class="article-entry" style="font-size: 0.9em;padding-bottom: 0;">

              <a href="/kaikeba/" target="_blank">
                【推荐阅读】我有一个重要发现...
              </a><br>

            </div>

            <!--
                        <div id="toc" class="toc-article">
                          <strong class="toc-title">文章目录</strong>
                          <ol class="toc">
                            <li class="toc-item toc-level-2"><a class="toc-link" href="#版本变化"><span class="toc-number">1.</span>
                              <span class="toc-text">版本变化</span></a></li>
                            <li class="toc-item toc-level-2"><a class="toc-link" href="#模块新增"><span class="toc-number">2.</span>
                              <span class="toc-text">模块新增</span></a>
                              <ol class="toc-child">
                                <li class="toc-item toc-level-3"><a class="toc-link" href="#spring-cloud-alibaba-dubbo"><span
                                  class="toc-number">2.1.</span> <span class="toc-text">spring-cloud-alibaba-dubbo</span></a></li>
                                <li class="toc-item toc-level-3"><a class="toc-link" href="#spring-cloud-alibaba-seata"><span
                                  class="toc-number">2.2.</span> <span class="toc-text">spring-cloud-alibaba-seata</span></a></li>
                                <li class="toc-item toc-level-3"><a class="toc-link"
                                                                    href="#spring-cloud-alibaba-sentinel-zuul"><span
                                  class="toc-number">2.3.</span> <span
                                  class="toc-text">spring-cloud-alibaba-sentinel-zuul</span></a></li>
                                <li class="toc-item toc-level-3"><a class="toc-link" href="#spring-cloud-alibaba-sms"><span
                                  class="toc-number">2.4.</span> <span class="toc-text">spring-cloud-alibaba-sms</span></a></li>
                              </ol>
                            </li>
                            <li class="toc-item toc-level-2"><a class="toc-link" href="#模块升级"><span class="toc-number">3.</span>
                              <span class="toc-text">模块升级</span></a></li>
                            <li class="toc-item toc-level-2"><a class="toc-link" href="#参考资料"><span class="toc-number">4.</span>
                              <span class="toc-text">参考资料</span></a></li>
                            <li class="toc-item toc-level-2"><a class="toc-link" href="#专题推荐"><span class="toc-number">5.</span>
                              <span class="toc-text">专题推荐</span></a></li>
                          </ol>
                        </div>-->


            <div class="article-entry" itemprop="articleBody">

              <ArticelBody :editor=article.editor></ArticelBody>


              <br/>
              <div class="alert alert-success">
                <div class="copyright-left" STYLE="font-size: 18px">
                  <i class="fa fa-lightbulb-o"></i>
                  本文由 <a href="/">程序员笑笑生</a> 创作，采用
                  <a href="http://creativecommons.org/licenses/by/3.0/cn" target="_blank" rel="external">CC BY 3.0
                    CN协议</a> 进行许可。
                  可自由转载、引用，但需署名作者且注明文章出处。如转载至微信公众号，请在文末添加作者公众号二维码。<br>
                </div>
                <div class="copyright-right">

                  <img style="width: 100px;" src="../../assets/adv/weixin.jpg"/>
                </div>
                <div style="clear:both;height:0;"></div>
              </div>


            </div>

            <article-footer :tags="article.tags"></article-footer>


          </div>


          <nav id="article-nav">

            <a href="/bzhan-code-boom/" id="article-nav-newer" class="article-nav-link-wrap">
              <strong class="article-nav-caption">上一篇</strong>
              <div class="article-nav-title">

                上一篇文章

              </div>
            </a>


            <a href="/spring-cloud-alibaba-sentinel-2-2/" id="article-nav-older" class="article-nav-link-wrap">
              <strong class="article-nav-caption">下一篇</strong>
              <div class="article-nav-title">下一篇文章</div>
            </a>

          </nav>


        </article>


      </section>

      <Aside></Aside>

      <!--布局左侧栏侧栏-->
      <foot></foot>

    </div>
  </div>
</template>

<script>


  import Aside from '../../components/aside/Aside'
  import Header from '../../components/header/Header'
  import Foot from '../../components/foot/Foot'
  import ArticleFooter from '../../components/article/ArticleFooter'
  import ArticelBody from '../../components/article/ArticelBody'
  import {viewArticle} from '@/api/article'

  export default {

    components: {Header, Aside, Foot, ArticelBody, ArticleFooter},
    created() {

    },
    mounted() {
      this.getArticle()
    },
    data() {
      return {
        article: {
          id: '',
          title: '',
          commentCounts: 0,
          viewCounts: 0,
          summary: '',
          author: {},
          tags: [],
          category: {},
          createDate: '',
          editor: {
            //初始值
            fontSize: '24px',
            value: '',
            toolbarsFlag: false,
          //	true： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏)
            subfield: false,
            defaultOpen: 'preview',
           //navigation: true, // 导航目录
          //markdown样式： 默认github, 可选配色方案  agate 黑底白字
            codeStyle :'gruvbox-dark',
            previewBackground :'#fbfbfb',
            scrollStyle:true,
            //boxShadowStyle: '5px 2px 10px 10px '
          }
        },
      }
    },
    methods: {
      getArticle() {
        let that = this;
        viewArticle(that.$route.params.id).then(data => {
          Object.assign(that.article, data.data);
          that.article.editor.value = data.data.body.content
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '文章加载失败', showClose: true})
          }
        })
      },
    }
  }
</script>


<style type="text/css">

  pre {
    color: inherit;
    background-color: inherit;
  }
</style>

<style>
  #busuanzi_value_page_pv {
    color: #009688;
    font-weight: bold;
  }

  @media (min-width: 768px) {
    .copyright-left {
      float: left;
      width: 80%;
    }

    .copyright-right {
      float: left;
      width: 20%;
    }
  }

  .row {
    margin-top: 15px;
  }
/*
  .index-card {
    padding: 15px;
    background: #fff;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  }

  .index-card-head {
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eceff2;
    color: #009688;
  }

  .index-card-body {

  }

  .index-card-body-list {
    display: block;
    margin-bottom: 7px;
    justify-content: space-between;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }*/

  .index-card-body-list a {
    color: grey;
    font-size: 15px;
    width: 80%;
  }

  .index-card-body-list a:hover {
    color: dodgerblue;
  }

  .media-body p {
    font-size: 13px;
    color: grey;
  }

</style>
